<template>
  <view class="padd-left-right">
    <view class="search">
      <u-search
        placeholder="请输入查询内容"
        v-model="keyword"
        :clearabled="true"
        :animation="false"
      ></u-search>
    </view>
    <view>
      <u-row
        gutter="16"
        class="border-bottom"
        v-for="(item, index) in dataList"
        :key="index"
        @click="details(item)"
      >
        <u-col span="1">
          <u-checkbox-group>
            <u-checkbox v-model="item.checked"></u-checkbox>
          </u-checkbox-group>
        </u-col>
        <u-col span="3">
          <u-image width="150rpx" height="150rpx" :src="item.img"></u-image>
        </u-col>
        <u-col span="8">
          <view>{{ item.model }}</view>
          <view>{{ item.name }}</view>
          <view>
            <text>金额：￥</text>
            <text>{{ item.money }}</text>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      checked: false,
      dataList: [
        {
          id: "1",
          checked: false,
          img: "https://cdn.uviewui.com/uview/example/fade.jpg",
          model: "SCADP12345",
          name: "酒精",
          money: "5",
        },
        {
          id: "2",
          checked: false,
          img: "https://cdn.uviewui.com/uview/example/fade.jpg",
          model: "SCADP12346",
          name: "口罩",
          money: "2",
        },
        {
          id: "3",
          checked: false,
          img: "https://cdn.uviewui.com/uview/example/fade.jpg",
          model: "SCADP12347",
          name: "纱布",
          money: "2",
        },
      ],
    };
  },
  methods: {
    // 资产详情
    details(row) {
      uni.navigateTo({
        url: "/pages/eam/Assets/AssetsList/AssetDetails",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  margin-top: 20rpx;
}

.wrap {
  padding: 24rpx;
}

.u-row {
  margin: 40rpx 0;
}

.demo-layout {
  height: 80rpx;
  border-radius: 8rpx;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>
